<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<style>
    .wjzBox_li {
        background: #FFFFFF;
        overflow: hidden;
    }
    .wjzBox_li .wjzBox_div {
        position: relative;
        overflow: hidden;
        background-color: #F1F1F1;
        padding-top: 8px;
    }
    .twoBox_img {
        width: 100%;
        overflow: hidden;
    }
    .twoBox_img img{
        width: 100%;
        display: block;
    }
    .menban {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        overflow: hidden;
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        background: -o-linear-gradient(top,rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0) ), to(rgba(0, 0, 0, 0.5) ));
        height: 100%;
    }
    .wjzBox_li .wjzBox_div .wjzBox_div_p1 {
        font-size: 20px;
        left: 15px;
        font-family: "SimHei";
        margin-bottom: 40px;
        position: absolute;
        bottom: 0;
        color: #FFFFFF;
    }
    .wjzBox_li .wjzBox_div .wjzBox_div_p2 {
        font-size: 12px;
        left: 15px;
        margin-bottom: 10px;
        background:rgba(0, 0, 0, 0.3);
        padding: 0 5px 0 5px;
        position: absolute;
        bottom: 0;
        color: #FFFFFF;
        box-shadow: 0 0 0 #fff, 0 0 1px #fff, 0 0 1px #fff;
        border-radius: 2px;
    }
    .wjzBox_li .wjzBox_p {
        padding: 10px 15px;
        color: #676767;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline;
        line-height: 30px;
    }
    .wjzBox_li .wjzBox_div .wjzBox_div_p2.living{
        background: rgba(250, 80, 0, 0.9);
    }
    .wjzBox_li .wjzBox_div .wjzBox_div_p2.un_living{
        background: rgba(220,220,220, 0.2);
    }
</style>
<c:forEach items="${channelList}" var="value">
    <c:if test="${value.channel_short == channelShort}">
        <c:set value="${value}" var="channel" />
    </c:if>
</c:forEach>
<!--content-list-wrap-->
<div class="content-list-wrap">
    <div class="mui-content mui-scroll-wrapper" id="contentListWrap">
        <div class="mui-scroll">
            <div class="inner-list">
                <!--content-top-banner-->
                <div class="content-top-banner">
                    <div class="mui-slider">
                        <script type="text/html" id="tpl-slider">
                        <div class="mui-slider-group">
                            {{each resultList.list as value i}}
                            <li class="wjzBox_li">
                                <a data-id="{{value.id}}" class="liveDetail">
                                    <div class="wjzBox_div">
                                        <div class="twoBox_img">
                                            <img src="{{if value.surface_plot}}{{value.surface_plot}}{{/if}}" alt="{{value.name}}"/>
                                        </div>
                                        <div class="menban">
                                            <p class="wjzBox_div_p1">{{value.title}}</p>
                                            {{liveStatus value.live_start_time value.live_end_time value.source_url}}
                                            <div class="wjzBox_div_p2" style="margin-left: 55px">{{value.reading}} 人参与</div>
                                        </div>
                                    </div>
                                    <p class="wjzBox_p" style="float: left">{{value.actor}}</p>
                                    <p class="wjzBox_p" style="float: right;">{{formatTime(value.create_time,'MM月dd日 HH:ii', false)}}</p>
                                </a>
                            </li>
                            {{/each}}
                        </div>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="nav.jsp" />
<script>
    var _textIndex = 0,total_page = 0;
    //上拉加载数据
    function pullUp2Refresh(){
        var _this = this;
        //如果存在数据，则继续添加数据
//        if(_textIndex < total_page){
            $.ajax({
                url: _basePath + "/app/live/list",
                data:{
                    channel_id: '${channelShort}',
                    pageSize : 3,
                    curPage: _textIndex + 1
                },
                dataType : 'json',
                success :function (data) {
                    total_page = data.resultList.totalPage;
                    var _html = template('tpl-slider', data);
                    $(".mui-slider").append(_html);

                    if(_textIndex == 0){
                        shareWx(window.location.href,"${channel.channel_img_url}","${channel.share_title}","${channel.share_desc}");
                    }

                    _textIndex++;

                    //如果存在数据，则继续添加数据
                    if(_textIndex < total_page){
                        _this.endPullupToRefresh(false);
                    }else{
                        _this.endPullupToRefresh(true);
                    }
                }
            });

//        }else{
//            _this.endPullupToRefresh(true);
//        }

    }
    //加载banner图
    /*function loadBannerList() {
        $.ajax({
            url: _basePath + "/app/live/list",
            data:{
                channel_id: ${channelShort}
            },
            dataType : 'json',
            success :function (data) {
                if(typeof data.resultList != undefined && data.resultList.totalCount > 0){
                    var _html = template('tpl-slider', data);
                    $(".mui-slider").append(_html);
                    initPullUp();
                }
            }
        });
    }*/

    $(function(){

//        loadBannerList();

        //初始化上拉加载
        mui.init({
            pullRefresh: {
                container: 'div#contentListWrap',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                up: {
                    height: 50,//可选.默认50.触发上拉加载拖动距离
                    auto: true,//可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '我是有底线的',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: pullUp2Refresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        });

        mui("body").on("tap","a.liveDetail",function () {
            mui.openWindow({
                url : "<%=basePath%>app/page?pv=live_detail&id=" + $(this).data("id")
            })
        });

    });

    function initPullUp() {

    }
</script>